import {ReactNode} from 'react'
import {BottomNavigation} from './BottomNavigation'
import {useNavigate} from 'react-router-dom'
import {ArrowLeft} from 'lucide-react'

interface LayoutProps {
    children: ReactNode
    title?: string
    showBottomNav?: boolean
    showBottomBack?: boolean
}


export const Layout = ({
                           children,
                           title = "港中大智慧班车司机端",
                           showBottomNav = true,
                           showBottomBack = false
                       }: LayoutProps) => {
    const navigate = useNavigate()


    return (
        <div className="min-h-screen bg-gray-50">

            {/* 应用标题 */}
            <div className="bg-white text-center py-4 border-b border-gray-200 relative">
                {showBottomBack && (
                    <button
                        className="absolute left-4 top-1/2 transform -translate-y-1/2"
                        onClick={() => navigate(-1)}
                    >
                        <ArrowLeft className="w-5 h-5 mr-1"/>
                    </button>
                )}

                <h1 className="text-lg font-medium text-gray-900">{title}</h1>
            </div>

            {/* 主内容区域 */}
            <div className={`${showBottomNav ? 'pb-16' : ''}`}>
                {children}
            </div>

            {/* 底部导航 */}
            {showBottomNav && <BottomNavigation/>}
        </div>
    )
}

